<script setup lang="ts">
import Mobile from './mo.vue'
import Pc from './pc.vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/3/img-src.ts'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()

const data: {
  mainTitle: string
  subtitle: string
  list: {
    key: number
    mainTitle: string
    subtitle: string
    media:
      | {
          type: 'video'
          src: string
        }
      | {
          type: 'img'
          src: Record<string, string>
        }
  }[]
} = {
  mainTitle: '超便捷直播助手',
  subtitle: '三麦降噪 超稳防抖',
  list: [
    {
      key: 0,
      mainTitle: '声音超清晰',
      subtitle: '三麦克风智能降噪，降低 90% 环境噪音，直播不用吼也能字字清晰',
      media: {
        type: 'video',
        src: getImgSrc('videos-pocket-live-0_1000.mp4'),
      },
    },
    {
      key: 1,
      mainTitle: '画面倍加稳',
      subtitle: '自研 EIS 算法+主摄 OIS 光学防抖。一边走动一边开直播，画面保持平稳不乱晃。',
      media: {
        type: 'video',
        src: getImgSrc('videos-pocket-live-0_1000.mp4'),
      },
    },
    {
      key: 2,
      mainTitle: '色彩更准确',
      subtitle: '首创直播色温调节，色温传感器搭配色彩纠偏算法，从美妆到服装都真实还原。',
      media: {
        type: 'img',
        src: {
          360: getImgSrc('images-pocket-live-4-mo-1.jpg.webp'),
          640: getImgSrc('images-pocket-live-4-pad-1.jpg.webp'),
          1024: getImgSrc('images-pocket-live-4-d7111.jpg.webp'),
          1440: getImgSrc('images-pocket-live-4-1.jpg.webp'),
        },
      },
    },
    {
      key: 3,
      mainTitle: '画质创新高',
      subtitle: '5000 万全焦段三主摄，还支持超微距自动对焦，从全景到微距手播都清晰。',
      media: {
        type: 'img',
        src: {
          360: getImgSrc('images-pocket-live-5-mo-1.jpg.webp'),
          640: getImgSrc('images-pocket-live-5-pad-1.jpg.webp'),
          1024: getImgSrc('images-pocket-live-5-d7111.jpg.webp'),
          1440: getImgSrc('images-pocket-live-5-1.jpg.webp'),
        },
      },
    },
  ],
}
</script>

<template>
  <div class="col-start-2">
    <keep-alive>
      <Pc v-if="width >= 768" :data />
      <Mobile v-else :data />
    </keep-alive>
  </div>
</template>
